<template>
  <div id="login">
    <div class="note border" :style="note">
    <el-container>
      <el-header height="80px">
        <div class="el-header-area">
          <div class="el-header-img">
            <img src="../../assets/yiyuanlogo.svg" width="50" height="50">
          </div>
          <div class="el-header-left">天津人民医院预约平台</div>
        </div>
      </el-header>
      <!-- ********************头部******************** -->
      <el-main>
        
        
        <router-view/>
        
        <!-- ***********************中间右部*********************************** -->
          
        <div class="el-main-footer">注册即同意《预约挂号服务协议》和《隐私协议》</div>

        <div class="el-main-left">
          <div class="el-left-img">
            <img src="../../assets/code.png" width="200" height="200">
          </div>
           <div class="el-left-img-small">
            <img src="../../assets/wechart.svg" width="50" height="50">
          </div>
           <div class="el-left-ziti">
           微信扫一扫查看微信小程序
          </div>
           <div class="el-left-ziti1">
           “天津人民医院快速挂号”
          </div>
          <div class="el-left-ziti2">
            天津市市卫健委官方指定平台  
          </div>
            <div class="el-left-ziti3">
              快速挂号 安全放心
          </div>
        </div>
      
      </el-main>
    </el-container>  </div>
    </div>
 





</template>




    <script>
export default {
  data() {
     return {
      // note: {
      //     backgroundImage: "url(" + require('../../assets/beijing.jpg') + ")",
      //     backgroundRepeat: "no-repeat",
      //     // backgroundSize: "1000px auto",
      //     marginTop: "5px",
      //   },
      ruleForm: {
        name: "",
        pass: "",
        idcard: "",
        phone: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        name: [{ validator: validateName, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        idcard: [{ validator: checkIdcard, trigger: "blur" }]
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 11) {
            callback(new Error("必须11位数"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var checkIdcard = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须18位数"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入真实姓名"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };

   
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>










<style scoped>
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 80px;
  font-family: "STXingkai";
  font-size: 30px;
  position: relative;
  right: 150px;
}
/* .el-header-area {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  font-family: "STXingkai";
  font-size: 50px;
  line-height: 150px;
  position: absolute;
  height: 150px;
  width: 80%;
  right: 150px;
  top: 50px;
} */

.el-header-left {
  position: absolute;
  left: 230px;
}
.el-header-img {
  position: absolute;
  left:  170px;
  top: 10px;
}
/* ********************************* */

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  position: relative;
}

.el-main-right {
  height: 700px;
  width: 500px;
  background-color: #ffffff;
  position: relative;
  margin-left: 180px;
}
.el-main-right-con {
  position: absolute;
  top: 150px;
}
.el-main-right-top {
  position: absolute;
  width: 500px;
  height: 100px;
}
.el-main-right-cencer {
  position: absolute;
  top: 300px;
  right: 80px;
  font-size: 15px;
  color: #82b1ff;
}
.el-main-right-footer {
  position: absolute;
  top: 430px;
  right: -110px;
  font-size: 15px;
  color: #82b1ff;
}
.el-main-right-top-booton {
  position: absolute;
  left: 10px;
  top: -25px;
}
.el-main-right-top-border {
  border-bottom: 3px solid #969696;
}
.el-main-footer {
  position: absolute;
  left: 200px;
  top: 660px;
}

.el-main-left {
  height: 700px;
  width: 500px;
  /* background-color: #ffffff; */
  position: relative;
  margin-left: 880px;
  margin-top: -700px;
}
.el-left-img {
  position: absolute;
  left: 160px;
  top: 130px;
}
.el-left-img-small{
    position: absolute;
  left: 130px;
  top: 300px;
}

.el-left-ziti{
    position: absolute;
  left: 180px;
  top: 270px;
}
.el-left-ziti1{
    position: absolute;
  left: 180px;
  top: 290px;
}
.el-left-ziti2{
    position: absolute;
  left: 140px;
  top: 340px;
  font-size: 20px;
  font-weight: 300;
}
.el-left-ziti3{
    position: absolute;
  left: 180px;
  top: 370px;
  font-size: 20px;
  font-weight: 300;
}


/* .border {
  border: 1px solid red;
} */
body > .el-container {
  margin-bottom: 0px;
  margin-top: 0px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
    
    
    
    

